<template>
  <div class="index">
      <div class="userInfo" v-model="userData">

          <div class="ms-field">
              <div class="mt-cell-wrapper">
                  <div class="mt-cell-title">
                      <span class="mt-cell-text">推广渠道包</span>
                  </div>
                  <div class="mt-cell-value">
                      {{userData.channelCode}}
                  </div>
              </div>
          </div>

          <div class="row">
              <div class="wrapper">
                  <div class="label">我的推广码</div>
                  <div class="text"><textarea class="copy-item" id="spreadCode" rows="2" readonly.sync="true">{{userData.spreadCode}}</textarea></div>
              </div>
          </div>
          <div class="row">
              <div class="wrapper">
                  <div class="label">推广地址</div>
                  <div class="text"><textarea class="copy-item" id="downloadUrl" rows="4" readonly.sync="true">{{userData.downloadUrl}}</textarea></div>
              </div>
          </div>

      </div>

      <div class="btns">
          <mt-button size="large" type="primary" class="btn-item" @click.native="copy('downloadUrl')">复制地址</mt-button>
          <mt-button size="large" type="primary" class="btn-item" @click.native="copy('spreadCode')">复制推广码</mt-button>
          <mt-button size="large" type="primary" class="btn-item" @click.native="code">我的二维码</mt-button>
      </div>

      <mt-tabbar v-model="tabLink" class="tabbar" @click.native="tabChange">
        <mt-tab-item id="/index" :class="tabLink == '/index' ? 'is_selected' : ''">
            <img slot="icon" src="../../assets/home.png">
          推广链接
        </mt-tab-item>
        <mt-tab-item id="/myaccount" :class="tabLink == '/myaccount' ? 'is_selected' : ''">
            <img slot="icon" src="../../assets/mine.png">
          推广日报
        </mt-tab-item>

      </mt-tabbar>

  </div>
</template>

<script>

  export default {
      name: 'index',
      data () {
          return {
              tabLink:'/index',
              userData: {
                  channelCode:'',
                  spreadCode:'',
                  downloadUrl:''
              },

          }
      },
      created() {
          const self = this;
          //页面加载前
          var rq_data = JSON.parse(localStorage.getItem('rq_data'));

          if(!rq_data) {
              self.$toast({
                  message:'请先登录再进行操作',
                  duration:2000
              });
              setTimeout(() => {
                  self.$router.push('/login');
              }, 2000);
          }else{
              //获取所有公司（即联运商）
              var param = {};

              var paramObj = {
                  'apiName':'youyu.config.loadSpreadInfo',
                  'param':param
              };
              self.$mPost(paramObj,function(callbackData){
                  self.userData = callbackData.data.data;
              },function(errCallbackData){
                  self.$toast({
                      message:errCallbackData.data.message,
                      duration:2000
                  });
                  setTimeout(() => {
                      self.$router.push('/login');
                  }, 2000);

              },function(catchCallbackData){
                  self.$toast({
                      message:catchCallbackData.message,
                      duration:2000
                  });
              });
          }
      },
      methods:{
          tabChange(){
              this.$router.push({path:this.tabLink});
          },
          copy(val){

              var Url2=document.getElementById(val);
              Url2.select(); // 选择对象
              document.execCommand("Copy"); // 执行浏览器复制命令

              this.$toast({
                  message:'已复制好，可贴粘。',
                  duration:2000
              });
          },
          code(){
             /* this.$router.push({path:'/code',query:{url:'http://p.youyuzone.com/tt/index.html?iCode='+this.userData.spreadCode+'&dc='+this.getUrlParam(this.userData.downloadUrl,'mw_android_dc')}});*/
              /*this.$router.push({path:'/code',query:{url:'http://p.youyuzone.com/test/index.html?iCode='+this.userData.spreadCode+'&dc='+this.getUrlParam(this.userData.downloadUrl,'mw_android_dc')}});*/
              this.$router.push({path:'/code',query:{url:'http://p.youyuzone.com/invite/index.html?iCode='+this.userData.spreadCode}});
          },
          getUrlParam(link,name){
              var arr = link.split('?');
              var searchStr = arr[1];
              var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");

              var r = searchStr.match(reg);
              if (r!=null) return (r[2]); return null;
          }
      }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .index{
        width:100%;
        height:100%;
    }
    .tabbar{
        background:#26A2FF;
        color:#fff;
    }

    .is_selected {
        background:#FF8F2A !important;
        color:#fff !important;
    }

    .btn-item{
        margin-top:20px;
    }
    .row{
        background-color: #fff;
        box-sizing: border-box;
        color: inherit;
        min-height: 48px;
        display: block;
        overflow: hidden;
        position: relative;
        text-decoration: none;

    }

    .wrapper{
        -webkit-box-align: center;
        align-items: center;
        box-sizing: border-box;
        display: flex;
        font-size: 16px;
        line-height: 1;
        min-height: inherit;
        overflow: hidden;
        padding: 0 10px;
        width: 100%;
    }
    .label{
        padding: 10px 0;
        width: 105px;
    }

    .text{
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        color: inherit;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 5px 0;

    }

    .copy-item{
        width:100%;
        border:none;
        text-decoration: none;
        outline: none;
        resize:none;
        vetical-align:middle;
        font-size: 16px;
        line-height: 1;
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        text-align:center;

    }
    .ms-field{
        background-color: #fff;
        box-sizing: border-box;
        color: inherit;
        min-height: 48px;
        display: flex;
        overflow: hidden;
        position: relative;
        text-decoration: none;
    }

    .mt-cell-wrapper{
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        box-sizing: border-box;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 16px;
        line-height: 1;
        min-height: inherit;
        overflow: hidden;
        padding: 0 10px;
        width: 100%;
    }

    .mt-cell-title{
        width: 105px;
        -webkit-box-flex: 0;
    }
    .mt-cell-value{
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        color: inherit;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }


</style>
